<template>
	<view class="conbox flex-column">
		<view class="inputbox flex-row-center mb10">
			<image class="sericon" src="../../static/28.png" mode="aspectFill"></image>
			<input type="text" placeholder="请输入搜索" placeholder-style="color: #858585;" v-model="obj.value" @input="getpros" />
		</view>
		<view class="w100 flex1 overflow-y">
			<view class="flex-row wrap" v-if="obj.list.length">
				<view v-for="(v,i) in obj.list" :key="i" class="proitem" :id="`proitem_${i+1}`">
					<view class="coverbox"><image class="cover" :src="v.imgs.cover" mode="aspectFill"></image></view>
					<view class="pd20-column">
						<view class="itemtitle lineOne">{{v.title}}</view>
						<view class="price" v-if="v.price">
							<text>¥{{v.price}}</text>
							<text class="desc">元/{{v.unit_}}</text>
						</view>
						<!-- <view class="min_nums" v-if="v.preferential&&v.preferential.length">最低起购量：{{v.preferential[0].min_nums}}{{v.preferential[0].unit}}</view> -->
					</view>
					<view class="flex-center"><view class="minibtn base-bg flex-center" @click="send(v)">发送</view></view>
				</view>
			</view>
			<view v-if="!obj.list.length" class="nodata w100 h100 flex-center">暂无数据</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,onActivated } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()
	const props = defineProps({
		identity: {
			type: String,
			default: ''
		}
	})
	
	let obj = reactive({
		list: [],
		value: ''
	})
	
	onMounted(()=>{
		obj.value = ''
		init()
	})
	
	const init=()=>{
		getpros()
	}
	
	const getpros=()=>{
		proxy.$reQuest.post(props.identity==='cs'?'customerservice/product/list':'mp/product/list',{
			"sort": 0,
			"key": obj.value||'',
			"mesh_max": "",
			"mesh_min": "",
			"wire_diameter_max": "",
			"wire_diameter_min": "",
			"aperture": "",
			"length_max": "",
			"length_min": "",
			"width_max": "",
			"width_min": "",
			"material": "",
			"weaving_type": "",
			"tag_scene": "",
			"tag_industry": "",
			"tag_product": "",
			"currentpage": 1,
			"pagesize": 10000
		},{token:true}).then(res=>{
			if(res.success){
				obj.list = res.msg.list||[]
				obj.list = map(e=>{
					e.price = ''
					if(e.preferential&&e.preferential.length){
						const o1 = e.preferential.find(ev=>ev.unit=='平方米')
						const o2 = e.preferential.find(ev=>ev.unit=='米')
						const o3 = e.preferential.find(ev=>ev.unit=='张')
						const o4 = e.preferential.find(ev=>ev.unit=='卷')
						e.price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
					}
				})
			}
		}).catch(err=>{})
	}
	
	const send=(v)=>{
		let price = ''
		let unit_ = ''
		if(v.preferential&&v.preferential.length){
			const o1 = v.preferential.find(ev=>ev.unit=='平方米')
			const o2 = v.preferential.find(ev=>ev.unit=='米')
			const o3 = v.preferential.find(ev=>ev.unit=='张')
			const o4 = v.preferential.find(ev=>ev.unit=='卷')
			price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
			unit_ = o1 ? `平方米` : (o2 ? `米` : (o3 ? `张` : (o4 ? `卷` : '')))
		}
		proxy.$emit('select',{
			product_id: v.product_id,
			size_id: v.size_id,
			title: v.title,
			cover: v.imgs.cover,
			price: price||'',
			min_price: v.min_price,
			max_price: v.preferential&&v.preferential.length>1?`${v.preferential[v.preferential.length-1].special_price}`:``,
			min_num_unit: v.preferential&&v.preferential.length?`${v.preferential[0].min_nums}${v.preferential[0].unit}`:'',
			unit_: unit_||''
		})
	}
</script>

<style lang="scss" scoped>
.conbox{
	width: 100%;height: 100%;overflow: hidden;
	.inputbox{
		width: 100%;height: 70rpx;border-radius: 70rpx;margin-right: 40rpx;background-color: #F4F4F4;
		padding: 0 30rpx;box-sizing: border-box;
		.sericon{width: 32rpx;height: 32rpx;margin-right: 10rpx;}
		input{flex: 1;height: 100%;}
	}
	.proitem{
		width: 330rpx;margin-right: 30rpx;border-radius: 25rpx;overflow: hidden;
		margin-bottom: 40rpx;
		.swiper,.swiper-item{
			width: 330rpx !important;height: 330rpx !important;border-radius: 15rpx;overflow: hidden;
			image{width: 100%;height: 100%;}
		}
		.coverbox{width: 330rpx;height: 330rpx;border-radius: 25rpx;overflow: hidden; background-color: #f0f0f0;border: solid 1rpx #f3f3f3;box-sizing: border-box;}
		.cover{width: 100%;height: 100%;}
		.itemtitle{font-size: 27rpx;color: #333;font-weight: 400;}
		.price{
			font-size: 38rpx;color: #333;font-weight: bold;
			.desc{font-size: 26rpx;font-weight: 400;color: #999;margin-left: 5rpx;}
		}
		.min_nums{font-size: 27rpx;color: #333;font-weight: 400;}
		.minibtn{width: 120rpx;height: 50rpx;border-radius: 10rpx;font-size: 24rpx;color: #fff;margin-top: 10rpx;}
	}
	.proitem:nth-child(2n){margin-right: 0;}
	.nodata{font-size: 22rpx;color: #999;}
}
</style>
